<template>
  <div>
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item v-for="(item, index) in breadList" :key="index" :to="{ path: item.path }">{{ item.meta.title
        }}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="container">
      <div>
        <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="120px" status-icon>
          <el-form-item label="用户名" prop="username">
            <el-input v-model="ruleForm.username" />
          </el-form-item>
          <el-form-item label="用户密码" prop="password">
            <el-input v-model="ruleForm.password" type="password" />
          </el-form-item>
          <el-form-item label="电话号码" prop="tel">
            <el-input v-model="ruleForm.tel" />
          </el-form-item>
          <el-form-item label="用户性别" prop="sex">
            <el-radio-group v-model="ruleForm.sex">
              <el-radio :label="1">男</el-radio>
              <el-radio :label="0">女</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="用户年龄" prop="age">
            <el-input v-model="ruleForm.age" />
          </el-form-item>
          <el-form-item label="用户头像" prop="uImg">
            <el-upload 
            action="#" 
            list-type="picture-card" 
            :auto-upload="false" 
            :on-remove="handledel"
            :on-change="changeUploadImg" 
            ref="upload" 
            :file-list="fileList" 
            :multiple="true" 
            name="file"
            v-model="fileList"
            :limit="1"
            >
              <el-icon>
                <Plus />
              </el-icon>
              <template #file="{ file }">
                <div>
                  <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
                  <span class="el-upload-list__item-actions">
                    <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                      <el-icon><zoom-in /></el-icon>
                    </span>
                    <span v-if="!disabled" class="el-upload-list__item-delete" @click="handledel(file)">
                      <el-icon>
                        <Delete />
                      </el-icon>
                    </span>
                  </span>
                </div>
              </template>
              <template #tip>
                <div class="el-upload__tip">
                  只能上传图片,且单张图片大小不能超过4MB
                </div>
              </template>
            </el-upload>
            <!--  放大的图片  -->
            <el-dialog v-model="dialogVisible" top="7vh">
              <img w-full :src="dialogImageUrl" alt="Preview Image" style="width: 100%; height: auto" />
            </el-dialog>
          </el-form-item>
          <el-form-item label="用户类型" prop="admin">
            <el-radio-group v-model="ruleForm.admin">
              <el-radio :label="1" value="1">管理员</el-radio>
              <el-radio :label="0" value="0">普通用户</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
      </div>
      <div>
        <el-button type="primary" @click="submitForm(ruleFormRef)">新增</el-button>
        <el-button @click="resetForm(ruleFormRef)">重置表单</el-button>
      </div>
    </div>
  </div>
</template>
<script setup>
import { useRouter, useRoute } from "vue-router";
import { ref, reactive, watch } from "vue";
import request from "../../utils/request";
import { ElNotification } from "element-plus";
import { Delete, ZoomIn, Plus } from "@element-plus/icons-vue";

const dialogImageUrl = ref("");
const dialogVisible = ref(false);
const disabled = ref(false);
const fileList = ref([]);
const upload = ref(null);

// 移除图片
const handledel = (file) => {
  fileList.value = fileList.value.filter((i) => {
    return i.uid !== file.uid;
  });
};
//展示大图
const handlePictureCardPreview = (file) => {
  dialogImageUrl.value = file.url;
  dialogVisible.value = true;
};

//限制大小
//文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用
const changeUploadImg = (file) => {
  const isJPG = file.raw.type === "image/jpeg";
  const isPNG = file.raw.type === "image/png";
  if (!isJPG && !isPNG) {
    ElNotification.error("上传图片只能是 JPG 或者 PNG 格式!");
    // 取消时在文件列表中删除该文件
    upload.value.handleRemove(file);
    return isJPG || isPNG;
  } else if (file.size / 1024 / 1024 > 4) {
    ElNotification.error("单张图片大小不能超过4MB!");
    return false;
  } else {
    fileList.value.push(file);
  }
};

let breadList = []; // 路由集合
const route = useRoute();
const getBreadcrumb = (url) => {
  let matched = url.matched;
  //如果不是首页
  if ("Home" == matched[0].name) {
    matched[0].meta = { title: "系统首页" };
  }
  breadList = matched;
};
watch(
  route,
  (newValue, oldValue) => {
    // console.log(222222,newValue)
    getBreadcrumb(newValue);
  },
  { deep: true, immediate: true }
);

const resetForm = (formEl) => {
  if (!formEl) return;
  formEl.resetFields();
};
const submitForm = async (formEl) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    const formData = new FormData();
    fileList.value.forEach((value, index) => {
      formData.append("file", value.raw);
    });
    formData.append("uId", ruleForm.uId);
    formData.append("username", ruleForm.username);
    formData.append("password", ruleForm.password);
    formData.append("tel", ruleForm.tel);
    formData.append("sex", ruleForm.sex);
    formData.append("age", ruleForm.age);
    formData.append("admin", ruleForm.admin);
    if (valid) {
      // console.log("提交更新", fields);
      request
        .post("/user/addUser", formData, {
          headers: {
            "Content-Type":
              "multipart/form-data;charset=UTF-8; boundary=<calculated when request is sent>",
          },
        })
        .then((res) => {
          if (res.data.code == 200) {
            ElNotification({
              title: "添加成功",
              message: "成功添加用户信息",
            });
            formEl.resetFields();
          } else {
            ElNotification({
              title: "添加失败",
              message: "请联系管理员检查失败原因",
            });
          }
        })
        .catch((e) => {
          ElNotification({
            title: "添加失败",
            message: "请联系管理员检查失败原因",
          });
        });
    } else {
      ElNotification({
        title: "校验失败",
        message: "请重新填写信息",
      });
    }
  });
};
const ruleForm = reactive({
  uId: "",
  username: "",
  password: "",
  tel: "",
  sex: "",
  age: "",
  uImg: "",
  admin: 0,
});
const rules = reactive({
  username: [
    {
      required: true,
      message: "请输入用户名",
      trigger: "blur",
    },
  ],
  password: [
    {
      required: true,
      message: "请输入密码",
      trigger: "blur",
    },
    {
      min: 1,
      max: 7,
      message: "长度大于1小于7",
      trigger: "blur",
    },
  ],
  tel: [
    {
      required: true,
      message: "请输入电话号码",
      trigger: "blur",
    },
    {
      min: 11,
      max: 11,
      message: "长度为11",
    },
  ],
  sex: [
    {
      required: true,
      message: "请输入性别",
      trigger: "blur",
    },
  ],
  age: [
    {
      required: true,
      message: "请输入年龄",
      trigger: "blur",
    },
  ],
  admin: [
    {
      required: true,
      message: "请选择用户类型",
      trigger: "change",
    },
  ],
});
const ruleFormRef = ref();
const centerDialogVisible = ref(false);
</script>
<style lang="scss" scoped>
.handle-box {
  margin-bottom: 20px;
}

.handle-select {
  width: 120px;
}

.handle-input {
  width: 300px;
  display: inline-block;
}

.table {
  width: 100%;
  font-size: 14px;
}

.red {
  color: #ff0000;
}

.mr10 {
  margin-right: 10px;
}

.table-td-thumb {
  display: block;
  margin: auto;
  width: 40px;
  height: 40px;
}
</style>
